<template>
  <button v-if="cfg?.skip && cfg?.skip?.label" class="swiper-skip" @click="onSkipClick">
    <span class="relative z-1">
      {{ ttsa.is_return_peek && cfg?.skip['label-again'] ? cfg?.skip['label-again'] : cfg?.skip.label || '跳过' }}
    </span>
  </button>
</template>
<script lang="ts" setup name="SwiperPure">

import { useUIStore } from '@/store/ui';
import { useTtsaStore } from "@/store/ttsa";

const ttsa = useTtsaStore()
const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
});

const uiStore = useUIStore()

const onSkipClick = () => {
  if (!props.cfg?.skip || !props.cfg?.skip.event_click) return
  uiStore.go(props.cfg?.skip.event_click)
}
</script>

<style scoped lang="scss">
.swiper-skip {
  @apply relative text-white inline-block ml-64/100 mt-15px;
  padding: 3px 16px 1.5px;
  border-radius: 20px;
  font-size: 12px;

  &::after {
    @apply absolute backdrop-filter backdrop-blur-6 z-0 h-full w-full top-0 left-0;
    content: '';
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5);
  }

  &:active {
    opacity: 0.7;
  }
}
</style>